<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:p="http://primefaces.org/ui"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jsp/jstl/core">
    <c:if test="#{!sesion.activa}">
        <!--#{!sesion.comprobar()}-->
    </c:if>
    <c:if test="#{!pCPedidoExt.consultarPermisos().ver}">
        <h:panelGroup layout="block" styleClass="divsinpermisos">
            <p:outputLabel value="No tiene permisos suficientes para ver esta página"/>
        </h:panelGroup>
    </c:if>
    <c:if test="#{pCPedidoExt.consultarPermisos().ver}">
        <ui:param name="nombreparam" value="externo" />
        <ui:param name="duracionparam" value="7000" />
        <ui:param name="efectshowparam" value="fade" />
        <ui:param name="efecthideparam" value="fade" />

        <h:panelGroup layout="block" id="divTabla#{nombreparam}" styleClass="delistar-js">
            <h:form id="formTabla#{nombreparam}">
                <p:growl id="growldel#{nombreparam}" widgetVar="wvgrowldel#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dataTable  var="item"
                              value="#{pCPedidoExt.listado}"
                              rows="10"
                              paginator="true"
                              paginatorAlwaysVisible="false"
                              paginatorTemplate="Página: {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                              lazy="true"
                              resizableColumns="true"
                              emptyMessage="No hay #{lenguajeBean.devolverStringPlural(nombreparam)} que mostrar."
                              id="tableModel#{nombreparam}"> 
                    <f:facet name="header">  

                        <p:toolbar id="tbx#{nombreparam}" style="margin-top: 4px; margin-bottom: 4px;">
                            <p:toolbarGroup align="left">
                                <p:commandLink value="Para crear un pedido nuevo haga click aquí."
                                               actionListener="#{pCPedidoExt.reinicializarTemporal()}"
                                               process="@this"
                                               update=":tabs:formdata#{nombreparam}:dlgdata#{nombreparam}"
                                               oncomplete="wvdlgdata#{nombreparam}.show();"
                                               title="Crear #{lenguajeBean.devolverString(nombreparam)}"
                                               rendered="#{pCPedidoExt.consultarPermisos().alta}"/>

                            </p:toolbarGroup>
                            <p:toolbarGroup>
                                <h:outputText styleClass="titulos" value="Listado de #{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"
                                              rendered="#{sesion.mostrarTituloTabla}"/>
                                <p:selectCheckboxMenu styleClass="comboSeleccion" value="#{pCPedidoExt.selectedChecksVisible}" label="Elegir columnas" panelStyle="width:220px"
                                                      panelStyleClass="saraza" >  
                                    <f:selectItems value="#{pCPedidoExt.checksVisible}"/>
                                    <p:ajax event="change" listener="#{pCPedidoExt.setearVisibles()}" process="@this"
                                            update=":tabs:formTabla#{nombreparam}"/>
                                </p:selectCheckboxMenu>
                            </p:toolbarGroup>
                        </p:toolbar>

                    </f:facet>

                    <p:column sortBy="#{item.id}"
                              rendered="#{pCPedidoExt.getColVisible('codigo')}">
                        <f:facet name="header"> 
                            <h:outputText value="Id"/>
                        </f:facet>
                        <h:outputText value="#{item.id}"/>
                    </p:column> 
                    <p:column sortBy="#{item.fechaHoraEnvio}"
                              rendered="#{pCPedidoExt.getColVisible('fechaHoraEnvio')}">
                        <f:facet name="header">
                            <h:outputText value="Fecha envio"/>
                        </f:facet>
                        <h:outputText value="#{item.fechaHoraEnvio}">
                            <f:convertDateTime pattern="dd/MM/yyyy HH:mm"/>
                        </h:outputText>
                    </p:column>

                    <p:column sortBy="#{item.direccion}"
                              rendered="#{pCPedidoExt.getColVisible('direccion')}" filterBy="#{item.direccion}">
                        <f:facet name="header"> 
                            <h:outputText value="Dirección"/>
                        </f:facet>
                        <h:outputText value="#{item.direccion}"/>
                    </p:column>

                    <p:column sortBy="#{item.cliente.nombreUsuario}"
                              rendered="#{pCPedidoExt.getColVisible('nombreCliente')}" filterBy="#{item.cliente.nombreUsuario}">
                        <f:facet name="header"> 
                            <h:outputText value="Cliente"/>
                        </f:facet>
                        <h:outputText value="#{item.cliente.nombreUsuario}"/>
                    </p:column>

                    <p:column sortBy="#{item.chofer.nombreUsuario}"
                              rendered="#{pCPedidoExt.getColVisible('nombreChofer')}" filterBy="#{item.chofer.nombreUsuario}">
                        <f:facet name="header"> 
                            <h:outputText value="Chofer"/>
                        </f:facet>
                        <h:outputText value="#{item.chofer.nombreUsuario}"/>
                    </p:column>
                    
                    <p:column sortBy="#{item.facturado}" width="70px" style="text-align: center;"
                              rendered="#{pCPedidoExt.getColVisible('facturado')}">
                        <f:facet name="header"> 
                            <h:outputText value="Factura"/>
                        </f:facet>
                        <h:outputText value="Emitida" rendered="#{item.facturado}"/>
                        <h:outputText value="Pendiente" rendered="#{!item.facturado}"/>
                    </p:column>

                    <p:column width="124" exportable="false">
                        <f:facet name="header">
                            <p:commandLink actionListener="#{pCPedidoExt.reinicializarTemporal()}"
                                           process="@this"
                                           update=":tabs:formdata#{nombreparam}:dlgdata#{nombreparam}"
                                           oncomplete="wvdlgdata#{nombreparam}.show();"
                                           title="Crear #{lenguajeBean.devolverString(nombreparam)}"
                                           rendered="#{pCPedidoExt.consultarPermisos().alta}" styleClass="agregarIco">
                                <h:graphicImage library="theme/images" name="agregar_.png" alt="Agregar un elemento" height="48" width="48" style="margin-left:35px" />
                            </p:commandLink>
                        </f:facet>
                        <p:commandLink actionListener="#{pCPedidoExt.imprimirFactura(item)}"
                                       process="@this" title="Imprimir Factura #{lenguajeBean.devolverString(nombreparam)}" 
                                       update=":tabs:formdata2#{nombreparam}:dlgdata2#{nombreparam} :tabs:formdata2#{nombreparam}"
                                       oncomplete="wvdlgdata2#{nombreparam}.show();"
                                       style="margin-right: 2px;">
                            <h:graphicImage library="theme/images" name="imprimir_icono.png" alt="Facturar un pedido" />   
                        </p:commandLink>

                        <p:commandLink    actionListener="#{pCPedidoExt.establecerTemporalGenerico(item, true)}"
                                          process="@this" title="Asignar Chofer a Pedido" 
                                          style="margin-right: 2px;" oncomplete="wvdlgchofer#{nombreparam}.show();"
                                          update=":tabs:formchofer#{nombreparam}:dlgchofer#{nombreparam} "
                                          disabled="#{!pCPedidoExt.consultarPermisos().modificacion}">
                            <h:graphicImage library="theme/images" name="camion-icon.png" alt="Asignar Chofer a Pedido" />   
                        </p:commandLink>
                        <p:commandLink 
                            actionListener="#{pCPedidoExt.establecerTemporalGenerico(item, true)}"
                            process="@this" title="Modificar #{lenguajeBean.devolverString(nombreparam)}" 
                            update=":tabs:formdata#{nombreparam}:dlgdata#{nombreparam}"
                            oncomplete="wvdlgdata#{nombreparam}.show();"
                            style="margin-right: 2px;"
                            disabled="#{!pCPedidoExt.consultarPermisos().modificacion or !pCPedidoExt.esEditable(item)}">
                            <h:graphicImage library="theme/images" name="editar_ico.png" alt="Modificar un elemento" />   
                        </p:commandLink>
                        <p:commandLink
                            actionListener="#{pCPedidoExt.establecerTemporalGenerico(item, false)}"
                            process="@this"
                            style="margin-right: 2px;"
                            oncomplete="wvconfe#{nombreparam}.show();"
                            title="Eliminar #{lenguajeBean.devolverString(nombreparam)}"
                            disabled="#{!pCPedidoExt.consultarPermisos().baja or !pCPedidoExt.esEditable(item)}">
                            <h:graphicImage library="theme/images" name="eliminar_ico.png" alt="Eliminar un elemento"/> 

                        </p:commandLink>
                        <p:confirmDialog id="confe#{nombreparam}" widgetVar="wvconfe#{nombreparam}"
                                         header="Confirmar eliminación de #{lenguajeBean.devolverStringPlural(nombreparam)}" 
                                         closeOnEscape="true" closable="true" showEffect="#{efectshowparam}" hideEffect="#{efecthideparam}"
                                         message="¿Seguro que desea eliminar permanentemente el elemento seleccionado?">
                            <p:commandButton value="Si" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                             actionListener="#{pCPedidoExt.eliminar()}"
                                             update="tableModel#{nombreparam} :tabs:formTabla#{nombreparam}:tableModel#{nombreparam}:tbx#{nombreparam} :tabs:formTabla#{nombreparam}:growldel#{nombreparam}"
                                             onclick="wvconfe#{nombreparam}.hide();" style="float: right;"/>  
                            <p:commandButton value="No" styleClass="ui-confirmdialog-no" 
                                             icon="ui-icon-close" onclick="wvconfe#{nombreparam}.hide();"
                                             style="float: right;"/>
                        </p:confirmDialog>

                    </p:column>

                </p:dataTable>
                <p:panel header="Exportar datos de la tabla" styleClass="exportar-datos">  
                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="excel.png" alt="Excel" />  
                        <p:dataExporter type="xls" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="pdf.png" alt="PDF" />  
                        <p:dataExporter type="pdf" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"/>  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="csv.png" alt="CSV" />    
                        <p:dataExporter type="csv" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="xml.png" alt="XML" />  
                        <p:dataExporter type="xml" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  
                </p:panel>  
            </h:form>

            <h:form id="formchofer#{nombreparam}" >
                <p:dialog modal="true" dynamic="true" resizable="false" closable="false" width="300px"
                          widgetVar="wvdlgchofer#{nombreparam}" id="dlgchofer#{nombreparam}"
                          header="Elegir un chofer" closeOnEscape="false"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">
                    <p:message for="valchofer#{nombreparam}" id="message-chofer-#{nombreparam}"/>
                    <p:panel style="text-align: center;" id="panel-chofer-#{nombreparam}">
                        <p:selectOneMenu value="#{pCPedidoExt.choferId}"  
                                         id="valchofer#{nombreparam}"
                                         required="true"
                                         requiredMessage="Debe seleccionar un chofer"
                                         style="text-align: left; width: 180px;">
                            <f:selectItem itemLabel="Seleccione..." itemValue="" />
                            <f:selectItems value="#{pCPedidoExt.listaChoferes}"/>
                        </p:selectOneMenu>
                    </p:panel>
                    <p:separator/>
                    <h:panelGroup layout="block" style="overflow: auto; display: block;">
                        <p:commandButton value="Asignar" oncomplete="handleComplete(xhr, status, args);" 
                                         actionListener="#{pCPedidoExt.asignarChofer()}"
                                         style="float: left;" styleClass="btn-aceptarSimple" 
                                         update=":tabs:formTabla#{nombreparam}:tableModel#{nombreparam} message-chofer-#{nombreparam}"/>
                        <p:commandButton value="Cancelar"
                                         oncomplete="wvdlgchofer#{nombreparam}.hide();"
                                         style="float: right;"
                                         styleClass="btn-cancelar"
                                         update="formchofer#{nombreparam}"
                                         process="@this"
                                         actionListener="#{pCPedidoExt.reinicializarTemporal()}"
                                         immediate="true"
                                         ajax="true">
                            <p:resetInput target="formchofer#{nombreparam}"/>
                        </p:commandButton>
                    </h:panelGroup>
                </p:dialog>
            </h:form>
            <h:outputScript>
                function handleComplete(xhr, status, args) {
                if(args.validationFailed) {
                } else {
                wvdlgchofer#{nombreparam}.hide();
                }
                }
            </h:outputScript>

            <h:form id="formdata#{nombreparam}" >
                <p:growl id="growldata#{nombreparam}" widgetVar="wvgrowldata#{nombreparam}"
                         autoUpdate="false" showDetail="false" globalOnly="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="false" width="900px"
                          widgetVar="wvdlgdata#{nombreparam}" id="dlgdata#{nombreparam}" 
                          header="#{pCPedidoExt.devolverTituloDlg()} #{lenguajeBean.devolverString(nombreparam)}"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}" position="right top">
                    <h:panelGroup id="paneldialogodata#{nombreparam}" layout="block" 
                                  style="overflow: auto; display: block;">
                        <ui:include src="dialogo_pedidos_ext.xhtml"/>
                        <h:panelGrid columns="2" style="margin-top: 10px;" styleClass="grid-modal">

                            <h:outputText value="(*)Cliente:"/>  
                            <h:column>
                                <p:autoComplete id="clienteUsuario#{nombreparam}" dropdown="true" value="#{pCPedidoExt.nombreUsuario}"   
                                                forceSelection="true" completeMethod="#{pCPedidoExt.complete}" required="true"
                                                requiredMessage="El campo Cliente es obligatrio">
                                    <p:ajax event="itemSelect" update="dir#{nombreparam}" partialSubmit="clienteUsuario#{nombreparam}"
                                            listener="#{pCPedidoExt.cargarDireccion()}" />
                                </p:autoComplete>
                            </h:column>

                            <h:outputText value="(*)Fecha y hora de envío:" />
                            <p:calendar value="#{pCPedidoExt.fechaHoy}" id="popupButtonCal" showOn="button" required="true"
                                        minHour="10" maxHour="22" minMinute="0" maxMinute="59" pattern="dd/MM/yyyy HH:mm"
                                        readonlyInput="true" requiredMessage="El campo Fecha es obligatrio" effect="explode"
                                        mindate="#{pCPedidoExt.minFecha}" maxdate="#{pCPedidoExt.maxFecha}" size="18"/>

                            <h:outputText value="(*)Dirección de envío:"  />
                            <h:column>
                                <p:inputTextarea rows="2" cols="60" id="dir#{nombreparam}" maxlength="255" 
                                                 required="true" requiredMessage="Debe ingresar una diracciòn de envìo"
                                                 autoResize="false" value="#{pCPedidoExt.direccionAd}"  
                                                 counter="contdata#{nombreparam}"  counterTemplate="{0} caracteres restantes">
                                    <p:watermark value="Quiero enviar mi pedido a otra dirección, solo por hoy..." for ="dir#{nombreparam}"/>
                                </p:inputTextarea>        
                                <h:panelGroup layout="block" id="x2#{nombreparam}" style="margin-left:5px;">
                                    <h:outputText id="contdata#{nombreparam}" style="font-size: 10px;"/>
                                </h:panelGroup>
                            </h:column>
                            
                            <h:outputText value="Comentarios:"  />
                            <h:column>
                                <p:inputTextarea rows="2" cols="60" id="cols2" maxlength="100" autoResize="false" 
                                                 counter="contdata2#{nombreparam}" counterTemplate="{0} caracteres restantes" 
                                                 value="#{pCPedidoExt.temporal.comentarios}">
                                    <p:watermark value="Quiero agregar comentarios para mi pedido ..." for ="cols2"/>
                                </p:inputTextarea>
                                <h:panelGroup layout="block" id="x1#{nombreparam}" style="margin-left:5px;">
                                    <h:outputText id="contdata2#{nombreparam}" style="font-size: 10px;"/>
                                </h:panelGroup>
                            </h:column>

                        </h:panelGrid>

                    </h:panelGroup>
                </p:dialog>
            </h:form>

            <h:form id="formcols#{nombreparam}">
                <p:growl id="growl-cols#{nombreparam}" widgetVar="wvgrowl-cols#{nombreparam}"
                         autoUpdate="false" showDetail="false" showSummary="false" life="#{duracionparam}"/> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="true" width="450px"
                          widgetVar="wvdlgcols#{nombreparam}" id="dlgcols#{nombreparam}"
                          header="Elegir columnas de la tabla" closeOnEscape="true"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">
                    <p:message for="val-cols-#{nombreparam}" id="msg-cols-#{nombreparam}"/>
                    <p:selectManyCheckbox value="#{pCPedidoExt.selectedChecksVisible}"  
                                          layout="pageDirection" id="val-cols-#{nombreparam}"
                                          required="true"
                                          requiredMessage="Debe seleccionar al menos una columna para ver.">  
                        <f:selectItems value="#{pCPedidoExt.checksVisible}"/>
                        <p:ajax event="change" update="growl-cols#{nombreparam}"
                                listener="#{pCPedidoExt.setearVisibles()}" process="@this"/>
                    </p:selectManyCheckbox>
                    <p:separator/>
                    <h:panelGroup layout="block" style="overflow: auto; display: block;">
                        <p:commandButton value="Aplicar" oncomplete="wvdlgcols#{nombreparam}.hide();"
                                         update=":tabs:formTabla#{nombreparam}:tableModel#{nombreparam}"
                                         style="float: right;" styleClass="btn-aceptar"/>
                        <p:commandButton value="Cancelar" oncomplete="wvdlgcols#{nombreparam}.hide();"
                                         style="float: right; margin-right: 10px;" styleClass="btn-cancelar"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>
            <h:form id="formdata2#{nombreparam}">
                <p:growl id="growldata2#{nombreparam}" widgetVar="wvgrowldata2#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="true" width="950px" 
                          widgetVar="wvdlgdata2#{nombreparam}" id="dlgdata2#{nombreparam}"
                          header="Imprimir Factura" 
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}" position="right top">
                    <h:panelGroup id="paneldialogodata2#{nombreparam}" layout="block" styleClass="factura"
                                  style="overflow: auto; display: block;">
                        <ui:include src="impresionExt.xhtml"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>

            <p:dialog maximizable="false" minimizable="false" modal="true" id="dlgespera#{nombreparam}"
                      widgetVar="wvdlgespera#{nombreparam}">
                <p:progressBar widgetVar="pbAjax" ajax="true" value="100" labelTemplate="{value}%" styleClass="animated"/>
            </p:dialog>
        </h:panelGroup>
        <h:outputScript>
            function handle#{nombreparam}datarequest(xhr, status, args) {if (args.validationFailed || !args.correcto) {} else {wvdlgdata#{nombreparam}.hide();}}
        </h:outputScript>
    </c:if>
</ui:component>